<template>
	<view class="m-back" :style="{'top':backTop+'rpx'}">
		<!-- :class="{blackBg:isBlackBg}" -->
		<view class="content-box">
			<view class="cover-box" @click="handleBackClick">
				<view class="left-icon" :class="{flexIcon: !name}">
					<view class="img-box">
						<image class="icon-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/44ca724f26134896a55990d7ea5e9c02.png"
							mode=""></image>
					</view>
				</view>
				<view class="right-text" v-if="name!='null'">
					{{name}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			name: {
				type: String,
				default: ""
			},
			// backTop: {
			// 	type: Number,
			// 	default: 100
			// }
		},

		data() {
			return {
				isBlackBg: false,
				homeJumpStoryId: "",
				screenWidth: 375,
				backTop: 100,
			}
		},
		watch: {

			// top: {
			// 	handler(newVal, oldVal) {
			// 		if (newVal > 0) {
			// 			// this.backTop = newVal
			// 		}
			// 	},
			// 	immediate: true,
			// 	deep: true

			// },

		},
		mounted() {
			this.getProps()
		},
		created() {
			try {
				let screenWidth = uni.getStorageSync('screenWidth')
				if (screenWidth) {
					this.screenWidth = screenWidth
				} else {
					this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
					uni.setStorageSync("screenWidth", this.screenWidth)
				}
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let {
					top,
					height
				} = menuButtonInfo
				let rpxHeight = this.pxToRpx(height)
				let rpxTop = this.pxToRpx(top)
				this.backTop = rpxTop + (rpxHeight - 50) / 2


			} catch (e) {

			}
		},
		methods: {
			getProps() {
				let paramsJson = this.paramsJson
				this.top = paramsJson.top && (paramsJson.top.default || paramsJson.top.default === 0) ? paramsJson
					.top.default :
					this
					.userAvatarJumpId
				this.isBlackBg = paramsJson.isBlackBg && (paramsJson.isBlackBg.default !== undefined && paramsJson
						.isBlackBg.default !== null) ? paramsJson.isBlackBg.default : this
					.isBlackBg

				this.homeJumpStoryId = paramsJson.homeJumpStoryId && paramsJson.homeJumpStoryId.default ? paramsJson
					.homeJumpStoryId.default :
					this
					.homeJumpStoryId
			},
			pxToRpx(px) {
				const designWidth = 750; // 设计稿宽度
				const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
				return rpx;
			},
			handleHomeClick() {
				console.log("家按钮点击事件");
				if (this.homeJumpStoryId) {
					this.$emit("getGameResult", this.homeJumpStoryId)
				}

			},
			handleBackClick() {
				console.log("返回按钮点击");
				this.$emit("getGameResult")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-back {
		position: absolute;
		width: 100vw;
		height: 50rpx;
		z-index: 99999999999999999999;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// pointer-events: fill;
		pointer-events: none;

		.home-box {
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			// background-color: rgba(0, 0, 0, .6);
			box-shadow: inset 0rpx 0rpx 10rpx rgba(255, 255, 255, .6);
			margin-left: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 6rpx;
			pointer-events: fill;

			.home-img {
				// width: 35rpx;
				// height: 35rpx;
				width: 100%;
				height: 100%;

			}
		}

		.content-box {
			height: 100%;
			display: inline-block;
			border-top-right-radius: 25rpx;
			border-bottom-right-radius: 25rpx;
			padding-right: 10rpx;

			.cover-box {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100%;
				pointer-events: fill;
			}


			.left-icon {
				// width: 35rpx;
				// height: 35rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				// display: inline-block;
				margin-left: 28rpx;

				.img-box {
					width: 44rpx;
					height: 44rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon-img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						vertical-align: middle;
					}
				}


			}

			.flexIcon {
				width: 44rpx;
				height: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}



			.right-text {
				height: 100%;
				font-size: 28rpx;
				color: #fff;
				line-height: 50rpx;
				text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .3);
				display: inline-block;
				font-weight: 700;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 10rpx;

			}
		}

		.blackBg {
			background-color: rgba(0, 0, 0, .6);
		}


	}
</style>